const precacheVersion = 2
const precacheName = "precache-v" + precacheVersion

var precacheFiles = [
  "/pages/index.html",
  "/images/dmx.jpg",
  "/images/broken.png"
]


/**新
 *  SW.js 浏览器会自动检查差异性 
 * 发生变更 install 事件被触发 此时，旧的 SW 还在工作，新的 SW 进入 waiting 状态。
 * 注意，此时并不存在替换接管，当你现在已经打开的页面关闭时，那么旧的 SW 则会被 kill 掉。
 * 新的 SW 就开始接管页面的缓存资源。 一旦新的 SW 接管，则会触发 activate 事件。 
*/

self.addEventListener("install", e => {
  console.log("[ServiceWorker] Installed")
// skipWaiting() 方法跳过 waiting 状态，然后会直接进入 activate 阶段
  self.skipWaiting()

  e.waitUntil(
    caches.open(precacheName).then(cache => {
      // 如果其中有一个 加载失败 那就代表着--这次启动 GG  
      return cache.addAll(precacheFiles)

      // cache.put(request, response).then(function() {
      //   // 成功缓存
      // });
    })
  ) 
})

self.addEventListener("activate", e => {
  console.log("[ServiceWorker] Activated")

  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(thisCacheName => {
          if ( thisCacheName.includes("precache") && thisCacheName !== precacheName ) {
            return caches.delete(thisCacheName)
          }
        })
      )
    })
  )

  // 更新客户端
  // self.clients.claim()

})





self.addEventListener("fetch", e => {
  e.respondWith(
    caches.match(e.request).then(response => {
      // 有缓存走缓存
      if (response) {
        return response
      }

      return fetch(e.request) .then(fetchResponse => {

        console.log('监听', fetchResponse);
        if (fetchResponse.ok) return fetchResponse;
        
        if (isImage(e.request)) {
          return returnBrokenImg()
        }

        
      }).catch(err => {
        if ( isImage(e.request) ) {
          return returnBrokenImg()
        }
      })
    })
  )
})

function isImage(fetchRequest) {
  return fetchRequest.method === "GET" && fetchRequest.destination === "image";
}

function returnBrokenImg () {
  return caches.match('/images/broken.png').then(response => response)
}



self.addEventListener('message', function (message, e) {
  console.log('service接受到的数据--->', message, e);
  sendMessageToPage('嘟嘟嘟')
});

function sendMessageToPage (msg) {

  self.clients.matchAll().then(function (clients) {
    if (clients && clients.length) {
      clients.forEach(function (client) {
        client.postMessage(msg);
      })
    }
  })
}

